<template>
    <div>
        <el-table :data="list" style="width: 80%">
            <el-table-column prop="name" label="名字" />
            <el-table-column prop="id" label="ID" />
            <el-table-column prop="age" label="年龄" />
            <el-table-column prop="sex" label="性别" />
            <el-table-column prop="date" label="时间" />
            <el-table-column prop="pic" label="消费" />
            <el-table-column fixed="right" label="Operations" width="180">
                <template #default="scope">
                    <el-button @click="bianClick(scope.row)">编辑</el-button>
                    <el-button @click.prevent="deleteRow(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="length" @current-change="clickPage" />
        <el-dialog v-model="dialogVisible" title="Tips" width="30%">
            <div>
                <el-row class="row">
                    <el-col :span="2">ID</el-col>
                    <el-col :span="22">
                        <el-input v-model="form.id"/>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col :span="2">名字</el-col>
                    <el-col :span="22">
                        <el-input v-model="form.name"/>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col :span="2">年龄</el-col>
                    <el-col :span="22">
                        <el-input v-model="form.age"/>
                    </el-col>
                </el-row>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
interface listType {
    title: string,
    name: string,
    age: number,
    sex: string,
    pic: number,
    date: string,
    id: string
}
const list = ref<listType[]>([])
const length = ref<number>()
const page = ref<number>(1)
const route = useRoute()
const router = useRouter()
// 分页
const clickPage = async (page: number) => {
    router.push({
        path: '/list',
        query: {
            ...route.query,
            page: page
        }
    })
    pageAxios(page)
}
const pageAxios = async (pages: number) => {
    page.value = pages
    getListAxios()
}
// 获取
const getListAxios = async () => {
    const resp = await axios.get('/api/list', { params: { page: page.value } })
    list.value = resp.data.list
    length.value = resp.data.length
}
// 删除
const deleteRow = (row: listType) => {
    console.log(row)
    ElMessageBox.confirm(
        '是否确定删除?',
        '删除',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const resp = await axios.get('/api/list/delte', { params: { id: row.id } })
            const { code, message } = resp.data
            if (code === 200) {
                ElMessage({
                    type: 'success',
                    message: message,
                })
                getListAxios()
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
// 编辑
const dialogVisible = ref<boolean>(false)
const form = ref<listType>({
    title: '',
    name: '',
    age: 0,
    sex: '',
    pic: 0,
    date: '',
    id: ''
})
const bianClick = (row: listType) => {
    dialogVisible.value = true
    form.value = { ...row }
}
onMounted(() => {
    getListAxios()
})
</script>
<style lang="scss">

</style>